<template>
  <div class="bg">
    <div class="wrapper">
      <div class="logo">
        <img src="../assets/img/logo.png" />
      </div>
      <h3>质检平台登录</h3>
      <div class="form-wrapper">
        <span>账户密码登录</span>
        <div class="container">
          <el-form>
            <el-form-item>
              <el-input
                placeholder="请输入邮箱"
                value=""
                onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
                v-model="form.username"
              >
                <i class="el-input__icon el-icon-user"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-input
                placeholder="请输入密码"
                ref="password"
                type="password"
                value=""
                onkeyup="this.value=this.value.replace(/[\u4E00-\u9FA5]/g,'')"
                show-password
                v-model="form.password"
                @keyup.enter="submitForm"
              >
                <i class="el-input__icon el-icon-lock"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked">自动登录</el-checkbox>
              <el-link :underline="false" class="checkBox">忘记密码</el-link>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%" type="primary" @click="submitForm"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, reactive } from "vue";
export default defineComponent({
  name: "login",
  setup: () => {
    const checked = ref(false);
    const form = reactive({
      username: "",
      password: "",
    });
    return { checked, form };
  },
  methods: {
    submitForm() {},
  },
});
</script>

<style lang="scss" scoped>
.bg {
  background: #f5f5f5;
  height: 100vh;
  .wrapper {
    position: absolute;
    width: 420px;
    border-radius: 10px;
    left: 50%;
    height: 540px;
    background: #fff;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 20px;
    box-sizing: border-box;
    .checkBox {
      float: right;
    }
    .el-button--primary {
      background: #175594;
      border: none;
    }
    .logo {
      width: 100%;
      margin-top: 30px;
      text-align: center;
    }
    H3 {
      font-weight: 500;
      text-align: center;
      font-size: 26px;
      color: #175594;
      font-weight: bold;
      margin-top: 15px;
      margin-bottom: 0px;
    }
    .form-wrapper {
      margin-top: 40px;
      span {
        margin: 10px 0;
        color: #175594;
        font-size: 16px;
        padding-bottom: 4px;
        border-bottom: 2px solid #175594;
      }
      .container {
        margin-top: 40px;
        position: relative;
      }
    }
  }
}
</style>
